<template>
    <div class="Dashboard-container">
        <div class="Dashboard-LeftNavBar">
            <div class="Dashboard-LeftNavBar-Nav">
                <a-menu v-model:selectedKeys="current" mode="vertical" :items="items" />
            </div>
        </div>
        <!-- 内容部分 -->
        <div class="Dashboard-Content">
            <div class="Dashboard-Content-ProfileBar">
                <div class="Dashboard-Content-ProfileBar-ProfileBox">
                    <img src="../assets/dashboardView/scholarhero-dark-2.svg" alt="SVG Image">
                    <div class="Dashboard-Content-ProfileBar-ProfileBox-PersonalDescription">
                        <p>{{ userInfo.name }} <img src="../assets/dashboardView/ident-teacher.svg" alt="SVG Image"></p>
                        <div class="Dashboard-Content-ProfileBar-ProfileBox-PersonalDescription-detail">
                            <img src="../assets/dashboardView/icon-school.svg" alt="icon"> 
                            {{ userInfo.school}}
                        </div>
                        <div class="Dashboard-Content-ProfileBar-ProfileBox-PersonalDescription-detail">
                            <img src="../assets/dashboardView/icon-number.svg" alt="icon">
                            {{ userInfo.stu_num}}
                        </div>
                        
                    </div>
                </div>

                <div class="Dashboard-Content-ProfileBar-AccountButton">
                    <!-- @click="showAccount" -->
                    <a-button style="display: inline-block;" type="default"><SettingOutlined />账号</a-button>
                    <AccountChange v-model:visible="AccountVisible" @update:visible="updateAccountVisible" />
                </div>
            </div>

            <div class="Dashboard-Content-CourseList">

            <div class="Dashboard-Content-CourseList-FunctionBar">
                <div class="Dashboard-Content-CourseList-FunctionBar-Controller">
                <a-segmented v-model:value="value" :options="data" @change="onSegmentedChange" />
                </div>

                <div class="Dashboard-Content-CourseList-ShowCards">
                    <a-row :gutter="{ xs: 8, sm: 16, md: 8, lg: 8 }">
                    <a-col 
                        v-for="(item, index) in classList" 
                        :key="index" 
                        :xs="{ span: 24, offset: 1 }"  
                        :sm="{ span: 12, offset: 2 }" 
                        :md="{ span: 6, offset: 2 }" 
                        :lg="{ span: 4, offset: 2 }"
                        stye="margin: 0px !important;"
                    >
                        <router-link :to="`/course/${item.course_number}/info`">
                        <a-card hoverable :bordered="false" class="Dashboard-Content-CourseList-ShowCards-Card">
                            <img src="../assets/dashboardView/class-img.svg" alt="SVG Image" />
                            <h4 class="card_title">{{ item.course_name }}</h4>
                            <p class="card_name">{{ item.professor_name }}</p> 
                        </a-card>
                        </router-link>
                    </a-col>
                    </a-row> 
                </div>
            </div>
            <div class="Dashboard-Content-CourseList-FunctionBar-NewclassButton">
                <!-- <a-button type="default" @click="router.push('/course/AddNew')">新建课程</a-button> -->
                <a-button @click="showModal" style="z-index: 999;">新建课程</a-button>
                <AddCourse v-model:visible="modalVisible" @update:visible="updateModalVisible" />
            </div>
            <div class="Dashboard-Content-CourseList-CustomerService">
                <a-button type="primary"><SvgIcon :name="'customservice'" width="28px" height="28px" style="color:#000000;"></SvgIcon></a-button>
            </div> 
            </div>
        </div>
    </div>
</template>
<script setup>
import AddCourse from './CourseManageView/AddCourse.vue';
//import AccountChange from './AccountChange.vue';
import { h, ref, reactive, onMounted } from 'vue';
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
import SvgIcon from '@/components/SvgIcon.vue';
import { CustomerServiceOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import api from '../api/index';
import { useJWTStore } from '../stores/JWT'; // 导入JWT Store

const router = useRouter();
const jwtStore = useJWTStore();

// 定义响应式的当前导航状态
const current = ref(['Dashboard']);

// 定义用户信息，并将其设置为响应式
const userInfo = ref({
  name: "苏小侠",
  school: "中国传媒大学",
  stu_num: "2009853P-I011-0015",
  role: jwtStore.getRole
});

// 获取用户信息并更新
api.getUserInfo()
  .then(response => {
    // console.log(response.data);
    userInfo.value.name = response.data.username;
    userInfo.value.school = response.data.university;
    userInfo.value.stu_num = response.data.stu_num;
  })
  .catch(error => {
    router.push('/dashboard');
    console.log('查询失败', error);
  });

// 定义导航项目
const items = [
  {
    icon: () => h(SvgIcon, { name: 'icon-nav-class' }),
    key: 'Dashboard',
    title: 'AI课堂',
    label: h('a', { href: '/dashboard', target: '_self' }, 'AI课堂')
  },
  {
    icon: () => h(SvgIcon, { name: 'icon-nav-help' }),
    key: 'help',
    title: '帮助',
    label: h('a', { href: '/help', target: '_self' }, '帮助')
  }
];

/* 我的课程分类 */
const data = reactive(['全部', '专业课程', '专业核心', '学科基础', '通识基础', '通识核心', '通识拓展', '实践必修', '实践选修', '其他']);
const value = ref(data[0]);

// 定义响应式的课程列表
const classList = ref([]);

// 定义查询课程的方法，并确保课程列表是响应式的
const queryCourse = async (category) => {
  try {
    const response = await api.getCourseList(category);
    classList.value = response.data; // 确保课程列表是响应式的
  } catch (error) {
    console.log('查询失败', error);
  }
};

const onSegmentedChange = (selectedValue) => {
  value.value = selectedValue;
  let category = selectedValue === '全部' ? 'all' : selectedValue;
  queryCourse(category);
};

// 在组件挂载时查询所有课程
onMounted(() => {
  queryCourse("all");
});

//新建课程用
const modalVisible = ref(false);

const showModal = () => {
    modalVisible.value = true;
    console.log("modalVisible");
};

const updateModalVisible = (value) => {
    modalVisible.value = value;
};
//账号设置用
const AccountVisible = ref(false);

const showAccount = () => {
    AccountVisible.value = true;
    console.log("AccountVisible");
};

const updateAccountVisible = (value) => {
    AccountVisible.value = value;
};


</script>
<style lang="scss" scoped>
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}
.Dashboard-container {
    box-sizing:border-box; /*把padding 算进整体高度(100vh)中,防止溢出*/
    background: #F6F8F7;
    display: flex;
    width: 100vw; /* 宽度与背景图片大小保持一致 */
    height: 100vh;
    background-repeat: no-repeat;
    padding: 0 20px 0 0; /* 清除容器的内边距 */
    margin: 0; /* 清除容器的外边距 */
    overflow: auto;
    position: relative;
}

.Dashboard-LeftNavBar {
    width:88px;
    height: 100%;
    margin: 0;
    // background: transparent url('../assets/dashboardView/icon.svg') no-repeat 16px 50px; /* 去掉默认背景色*/
    // background: #000;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0; /* 防止被挤压遮挡*/
    // display: inline-block;
    margin-left: 0; /* 与父元素左边界距离为0 */
    justify-content: center; /* 子元素水平居中 */
}

.Dashboard-LeftNavBar-Icon {
    width: 60px;
    height: 60px;
    margin-left: 12px;
    margin-top: 20px;
}

.Dashboard-LeftNavBar-Nav {
    // margin-top: 294px;
    width: 64px;
    margin-left: auto;
    margin-right: auto;
    .ant-menu {
        border:0 !important;  /*!important=这个属性权重最高，不会被其他class的样式覆盖 慎用*/
        background: #F6F8F7;
        width: 64px;
        height: 134px;
    }
    /* 使用了 scope+scss后，会导致 无法覆写 组件内部样式的情况出现，需要通过 :deep 前缀才能修改样式 */
    :deep(.ant-menu-item) {
        border-radius: 12px;
        height: 64px; 
        line-height: 24px;
        width: 60px;
        /*color: #262626;*/
        color: #8c8c8c;
        font-family: "PingFang SC";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


        a{/*-10px 抵消掉 父级的 margin-left:10px,让标题居中*/
            margin-left: -10px;
        }
    } 
    :deep(.ant-menu-item-selected) {
        
        border: 1px solid #EDEDED;
        box-shadow: 0px 2px 2px 0px #F2F2F2, 0px 2px 2px 0px #F2F2F2;
        background-color: #FFF;
        border-radius: 12px;
        height: 64px;
        width: 60px;
        color:#262626;
    }
}



/*右边*/
.Dashboard-Content {
    width: 100%;
    flex:1; /*自适应*/
    height: 100vh;
    margin: 0;

}

.Dashboard-Content-ProfileBar {
    margin-top: 20px;
    height: 200px;
    display: flex;
    flex-shrink: 0;
    align-content: center;

    border-radius: 12px;
    border: 1px solid #EDEDED;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px #F2F2F2;

    position: relative;
    overflow: hidden;
}
.Dashboard-Content-ProfileBar-ProfileBox {
    width: auto;
    height: 116px;
    flex-shrink: 0;
    margin-left: 46px;

    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */

    position: relative;
    top: calc(50% - 58px); /* 垂直居中 */
    z-index: 10;

}

.Dashboard-Content-ProfileBar-ProfileBox img {
    display: inline-block;
    margin-left: 0;
    
}


.Dashboard-Content-ProfileBar-ProfileBox-PersonalDescription {
    display: inline-block;
    margin-top: 0;
    
}
.Dashboard-Content-ProfileBar-ProfileBox-PersonalDescription p {
    color: #262626;
    font-family: "PingFang SC";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 100% */ 
    
    margin-left: 24px;
}
.Dashboard-Content-ProfileBar-ProfileBox-PersonalDescription-detail {
    color: var(--65, #595959);
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */

    justify-content: center;
    align-items: center;
    margin-left: 24px;
}

.Dashboard-Content-ProfileBar-AccountButton {
    
    width: 616px;
    height: 200px;
    position: absolute;
    bottom: 1.5px;
    right:1.5px;
    background-image: url('../assets/dashboardView/decoration-p.png');
    
    background-size: cover;
    background-position: right;
}
.Dashboard-Content-ProfileBar-AccountButton .ant-btn {
    width: 88px;
    height: 40px;
    position: absolute;
    top:79px;
    right:45px;
}


/*我的课堂*/
.Dashboard-Content-CourseList {

    height: auto;
    min-height: calc(100% - 200px - 12px - 40px );  /*  最小高度，默认撑满一屏，防止出现 没有内容时 一片灰色的情况 =屏幕高度100% - 头部高度200px - marginTop 12px - marginBottom 20px */
    margin-top: 12px;
    border-radius: 12px;
    border: 1px solid #EDEDED;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px #F2F2F2;
    
    position: relative;

}
.Dashboard-Content-CourseList-Title {
    color: #262626;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */

    margin-left: 23px;
    margin-top: 24px;
}


.Dashboard-Content-CourseList-FunctionBar-Controller {
    margin-left: 23px;
    margin-top:24px;
    margin-bottom: 24px;
    max-width: calc(100% - 142px) !important;

    display: inline-block;
    
}
:deep(.ant-segmented) {
    max-width: 100% !important;
    overflow: scroll;
    border-radius: 8px;
    background: #F6F6F6;
}

:deep(.ant-segmented .ant-segmented-item) {
    color: var(--45, #8C8C8C);
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
    :hover {
        color: #00BD79;
    }
}


:deep(.ant-segmented .ant-segmented-item-selected) {
    color: #00BD79;
    font-weight: 550;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px #F2F2F2;
}


.Dashboard-Content-CourseList-FunctionBar {
    position: relative;
    z-index: 2;
}
.Dashboard-Content-CourseList-FunctionBar-NewclassButton {
    display: inline-block;
    position: absolute;
    right: 23px;
    top:24px;
    // top: 50%;
    // transform: translateY(-50%);
}


.Dashboard-Content-CourseList-ShowCards {
    box-sizing: border-box;
    padding: 0 23px;
    height: auto; /* 高度根据内容自适应*/
}

.Dashboard-Content-CourseList-ShowCards-Card {
    width: 100%;
    height: auto;
    position: relative;
}
.Dashboard-Content-CourseList-ShowCards-Card img {
    border-radius: 12px 12px 0 0;
    width: 100%;/*设置为自动什么意思 图片宽度跟着card的宽度走，高度Auto=跟着宽度等比例缩放*/
    height:auto;
}
.ant-card {
    margin-bottom: 16px;
    background: #FFF;
    :deep(.ant-card-body) {
        height: 253px;
        height:auto;/*父级给了高度，子级100% 即可自动继承*/ 
        padding: 0 !important;
    }
    .card_title {
        font-weight: 700;
        line-height: 2;
        padding: 0 10px;
    }
    .card_name {
        padding: 0 10px;
        line-height: 1.8;
        color: #262626;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 171.429% */
    }
}

.Dashboard-Content-CourseList-CustomerService {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    z-index: 10;
}

.Dashboard-Content-CourseList-CustomerService .ant-btn {
    border-radius: 12px;
    border: none;
    background: linear-gradient(180deg, #6FD180 0%, #01BE7A 100%);
    box-shadow: 0px 2px 2px 0px rgba(255, 255, 255, 0.29) inset, 0px 4px 10px 0px rgba(1, 190, 122, 0.20);
        
    width: 60px;
    height: 60px;
}

.Dashboard-Content-CourseList-CustomerService .anticon svg {
    display: inline-block;
    width:28px;
    height: 28px;
    color:#262626;
}


:deep(.ant-col-sm-offset-2) {
    margin: 0;
}

</style>